<template>
  <div>
    <!-- 内容主体区域 -->
    <el-dialog :title="title" :visible.sync="visible" :close-on-click-modal="false"
               :before-close="handleClose" width="60%">
      <el-form ref="form" :model="formData" label-width="100px">
        <el-row :gutter="20">
          <el-col :span="12">
            <div class="grid-content bg-purple">
              <el-form-item label="应用标识" prop="appCode">
                <el-input v-model="formData.appCode" autocomplete="off" disabled />
              </el-form-item>
            </div>
          </el-col>
          <el-col :span="12">
            <div class="grid-content bg-purple">
              <el-form-item label="资源标识" prop="resourceCode">
                <el-input v-model="formData.resourceCode" autocomplete="off" disabled />
              </el-form-item>
            </div>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12">
            <div class="grid-content bg-purple">
              <el-form-item label="资源名称" prop="resourceName">
                <el-input v-model="formData.resourceName" autocomplete="off" disabled />
              </el-form-item>
            </div>
          </el-col>
          <el-col :span="12">
            <div class="grid-content bg-purple">
              <el-form-item label="项目编码" prop="projectCode">
                <el-input v-model="formData.projectCode" autocomplete="off" disabled />
              </el-form-item>
            </div>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12">
            <div class="grid-content bg-purple">
              <el-form-item label="控制器类名" prop="className">
                <el-input v-model="formData.className" autocomplete="off" disabled />
              </el-form-item>
            </div>
          </el-col>
          <el-col :span="12">
            <div class="grid-content bg-purple">
              <el-form-item label="方法名称" prop="methodName">
                <el-input v-model="formData.appCode" autocomplete="off" disabled />
              </el-form-item>
            </div>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12">
            <div class="grid-content bg-purple">
              <el-form-item label="所属模块" prop="modularCode">
                <el-input v-model="formData.modularCode" autocomplete="off" disabled />
              </el-form-item>
            </div>
          </el-col>
          <el-col :span="12">
            <div class="grid-content bg-purple">
              <el-form-item label="模块名称" prop="modularName">
                <el-input v-model="formData.modularName" autocomplete="off" disabled />
              </el-form-item>
            </div>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12">
            <div class="grid-content bg-purple">
              <el-form-item label="初始化地址" prop="ipAddress">
                <el-input v-model="formData.ipAddress" autocomplete="off" disabled />
              </el-form-item>
            </div>
          </el-col>
          <el-col :span="12">
            <div class="grid-content bg-purple">
              <el-form-item label="是否视图">
                <el-switch
                  v-model="formData.viewFlag"
                  class="tableScopeSwitch"
                  prop="viewFlag"
                  :active-value="true"
                  :inactive-value="false"
                  active-text="是"
                  inactive-text="否"
                  disabled
                />
              </el-form-item>
            </div>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="24">
            <div class="grid-content bg-purple">
              <el-form-item label="请求路径" prop="url">
                <el-input v-model="formData.url" autocomplete="off" disabled />
              </el-form-item>
            </div>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12">
            <div class="grid-content bg-purple">
              <el-form-item label="请求方法" prop="httpMethod">
                <el-input v-model="formData.httpMethod" autocomplete="off" disabled />
              </el-form-item>
            </div>
          </el-col>
          <el-col :span="12">
            <div class="grid-content bg-purple">
              <el-form-item label="是否需登录">
                <el-switch
                  v-model="formData.requiredLoginFlag"
                  class="tableScopeSwitch"
                  prop="requiredLoginFlag"
                  :active-value="true"
                  :inactive-value="false"
                  active-text="是"
                  inactive-text="否"
                  disabled
                />
              </el-form-item>
            </div>
          </el-col>
        </el-row>
        <!-- <el-row>
          <el-col style="text-align:center">
            <el-button @click="handleClose" size="mini">关 闭</el-button>
          </el-col>
        </el-row> -->
      </el-form>
    </el-dialog>
  </div>
</template>

<script>
export default {
  name: 'ResourceEdit',
  props: {
    visible: {
      type: Boolean,
      default: false
    },
    formData: {
      type: Object,
      default: () => {
        return {}
      }
    },
    title: {
      type: String,
      default: ''
    },
    closeForm: {
      type: Function,
      default() {}
    }
  },
  methods: {
    // 关闭对话框触发
    handleClose() {
      // 清空数据关闭页面
      this.$refs['form'].resetFields()
      this.closeForm()
    }
  }
}
</script>

<style>
  .tableScopeSwitch .el-switch__label {
    position: absolute;
    display: none;
    padding-left: 4px;
    color: #fff;
  }
  /*打开时文字位置设置*/
  .tableScopeSwitch .el-switch__label--right {
    z-index: 1;
    right: -3px;
  }
  /*关闭时文字位置设置*/
  .tableScopeSwitch .el-switch__label--left {
    z-index: 1;
    left: 19px;
  }
  /*显示文字*/
  .tableScopeSwitch .el-switch__label.is-active {
    display: block;
  }
  .tableScopeSwitch.el-switch .el-switch__core,
  .el-switch .el-switch__label {
    width: 50px !important;
  }
</style>
